<template>
  <div>
    <div v-if="!typeList.length" style="color:#888;text-align:center;line-height:260px">
      暂无数据
    </div>
    <div v-else :id="tableType" class="contain" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'LineCharts',
  props: {
    allList: {
      type: Array,
      default: () => { return [] }
    },
    dataList: {
      type: Object,
      default: () => { return {} }
    },
    typeList: {// 一级分类
      type: Array,
      default: () => { return [] }
    },
    secondList: {
      type: Array,
      default: () => { return [] }
    },
    tableType: {
      type: String,
      default: 'main'
    },
    seriesType: {
      type: Array,
      default: () => { return [] }
    }

  },
  data() {
    return {
      max: 10
    }
  },
  mounted() {
    if (!this.typeList.length) return
    if (this.secondList.length === 0) {
      const originData = JSON.parse(JSON.stringify(this.dataList))
      const keyList = Object.keys(originData).filter(v => Number(v) >= 0)
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        const item = JSON.parse(JSON.stringify(originData[keyList[i]]))
        datas.push({ name: item[0], data: item.slice(2), type: 'line', barWidth: 10 })// (item[0] +	item.slice(1)).split(',')
      }
      this.initData1(datas)
    } else {
      this.initData()
    }
  },
  methods: {
    changeType(v) {

    },
    xFormat() {
      const temp1 = this.typeList.map((v, index) => {
        return {
          type: 'category',
          gridIndex: index,
          data: this.secondList,
          axisTick: {
            length: 0,
            interval: 0
          },
          axisLabel: {
            rotate: 30
          }
        }
      })
      const temp2 = this.typeList.map((v, index) => {
        return {
          type: 'category',
          gridIndex: index,
          data: [
            {
              value: v,
              textStyle: {
                fontSize: 16,
                color: '#333',
                lineHeight: 90
              }
            }
          ],
          position: 'bottom',
          axisTick: {
            length: 400
          }
        }
      })
      return [...temp1, ...temp2]
    },
    yFormat() {
      const list = this.typeList.map((v, index) => {
        return {
          show: false,
          gridIndex: index + 1,
          type: 'value',
          max: this.max
        }
      })
      return list
    },
    dataFormat() {
      const chartList = this.dataList.chartList
      const tempList = []
      for (let i = 0; i < this.typeList.length; i++) {
        const row = chartList[this.typeList[i]]
        tempList.push(row)
      }
      const list = []
      this.max = 10
      tempList.forEach((v, index) => {
        v.forEach((i, key) => {
          for (let j = 0; j < i.length; j++) {
            if (i[j] > this.max) this.max = i[j]
          }
          const item = {
            name: this.seriesType[key],
            xAxisIndex: index,
            yAxisIndex: index,
            data: i,
            lineWidth: 2,
            type: 'line'
          }
          list.push(item)
        })
      })
      return list
    },
    formatGrid() {
      const data = []
      const width = (this.seriesType.length * this.secondList.length) / 3 < 20 ? 20 : (this.seriesType.length * this.secondList.length) / 3
      for (let i = 0; i < this.typeList.length; i++) {
        const item = {
          top: '5%',
          width: width < 20 ? '20%' : width + '%',
          right: '5%',
          left: i === 0 ? '10%' : (i * width + 10) + '%', // 控制横轴长度
          bottom: '15%'
        }
        data.push(item)
      }
      return data
    },
    initData() {
      const option = {
        series: this.dataFormat(),
        legend: {
          show: true,
          data: this.seriesType
        },
        grid: this.formatGrid(),
        tooltip: {
          trigger: 'axis',
          feature: {
            saveAsImage: {}
          },
          axisPointer: {
            type: 'shadow', // line
            label: {
              show: true,
              color: '#000'
            }
          }
        },
        xAxis: this.xFormat(),
        // dataZoom: [
        //   {
        //     show: true,
        //     bottom: 'auto',
        //     moveHandleSize: 0,
        //     start: 0,
        //     end: 100
        //   }],
        yAxis: [{
          type: 'value',
          max: this.max,
          axisLabel: {
            interval: 0
          },
          splitLine: {
            show: false
          }
        }, ...this.yFormat()
        ]
      }
      const chartDom = document.getElementById(this.tableType)
      // if (chartDom == null) {
      const myChart = echarts.init(chartDom)
      option && myChart.setOption(option)
      // }
      // const myChart = echarts.init(chartDom)
      // option && myChart.setOption(option)
      return
    },
    initData1(datas) {
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.typeList
        },
        grid: {
          left: '30%',
          right: '4%',
          bottom: '3%',
          width: this.typeList.length * this.seriesType.length * 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.seriesType
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            inside: true, // 标签刻度朝内
            margin: 0, // 清除默认间距
            padding: [0, 30, 0, 0], // 右边内边距10
            textStyle: {
              align: 'right' // 文字右对齐
            }
          }
        },
        series: datas
      }
      const chartDom = document.getElementById(this.tableType)
      const myChart = echarts.init(chartDom)
      option && myChart.setOption(option)
      return
    },
    formatData(list) {
      const data = list
      data.forEach((v, index) => {
        v.forEach((i, key) => {
          if (Number(i) >= 0) {
            data[index][key] = Number(i)
          }
        })
      })
      return data
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
//  width:100%;
 height:450px;
 overflow: auto;
}
</style>
